import { Component } from 'react';
import { AiOutlineSync, AiOutlineRight } from 'react-icons/ai';
import { BiArrowToTop } from 'react-icons/bi';
import './BdList.scss';
class BdList extends Component {
  state = {};
  render() {
    const { indexs, searchArr, topChange } = this.props;
    return (
      <section className="content">
        <div className="top-search">
          <a href="https://top.baidu.com/board?tab=realtime">
            百度热搜
            <AiOutlineRight className="icon-re" />
          </a>
          <span onClick={() => topChange()}>
            <AiOutlineSync className="icon-huan" /> 换一换
          </span>
        </div>
        {/*列表*/}
        <div className="list">
          <ul>
            {indexs.map((item, index) => {
              return (
                <li key={index} className={index % 2 ? 'odd' : 'even'}>
                  <span className={'top' + indexs[index]}>
                    {item ? item : <BiArrowToTop className="icon-ding" />}
                  </span>
                  <a href="###">{searchArr[indexs[index]]}</a>
                  {indexs[index] === 2 ? <span className="hot">热</span> : ''}
                </li>
              );
            })}
            <li className="kong"></li>
          </ul>
        </div>
      </section>
    );
  }
}

export default BdList;
